<template>
	<view>
		<!-- 上面的提醒 -->
		<view class="u-padding-20 u-content-color " style="font-weight: bold;background-color: white;">
			<text>姓名：{{data.custom_name}}</text>
			<text style="margin: 0 10rpx;">/</text>
			<text>车牌号：{{data.car_num}}</text>
			<br />
			<text>已支付金额：{{data.real_pay_amount}}</text>
			<text style="margin: 0 10rpx;">/</text>
			<text class="" style="color: #fa3534;">待退款金额：{{data.expense_amount}}</text>
		</view>
		<!-- 支付表单 -->
		<view style="margin-top: 20rpx;padding: 20rpx;background-color: white;">
			<u-form :model="form" ref="uForm" label-width="200">
				<u-form-item label="退款原因" prop="item_name"><u-input v-model="form.item_name" /></u-form-item>
				<u-form-item label="退款金额" prop="item_single_price"><u-input type="digit"
						v-model="form.item_single_price" /></u-form-item>

				<u-form-item label="退还渠道" prop="pay_type">
					<u-select v-model="showSelectChannel" @confirm="confirm" :list="[
																{id:1,label:'微信',value:1},
																{id:2,label:'支付宝',value:2},
																{id:3,label:'银行转账',value:3},
																{id:4,label:'刷卡',value:4},
																{id:5,label:'押金转支付',value:5},
																{id:6,label:'现金',value:6},
																{id:7,label:'转移',value:7}
															]"></u-select>
					<u-input v-model="form.pay_type" :disabled="true" type="select" @click="showSelectChannel=true" />
				</u-form-item>
				<!-- <u-form-item label="备注" prop="remark">
					<u-input v-model="form.remark" />
				</u-form-item> -->
				<u-form-item label="退款凭证">
					<u-upload ref="uUpload"  :auto-upload="false" :show-progress="true"
						:form-data="{path:'/static/img/back_amount/'}" :multiple="true">
					</u-upload>
				</u-form-item>
				<view style="width: 100%;">
					<u-button @click="submit" type="primary">退款</u-button>
				</view>
			</u-form>
		</view>
		<u-toast ref="uToast"></u-toast>
		<!-- <u-avatar src="http://tmp/ExThmpgDoq9dd60ec45b54a0ac551cea6964878ba556.jpg"></u-avatar> -->
	</view>
</template>

<script>
	import {
		data
	} from 'uview-ui/libs/mixin/mixin';
	import cos from '../../utils/cos';
	// const COS = require('cos-js-sdk-v5');
	export default {
		data() {
			return {
				orders:null,
				pay_type: '',
				showSelectChannel: false,
				uploadList: [],
				host: '',
				data: {},
				form: {
					pay_type: '',
					item_name: '',
					remark: '',
					item_single_price: ''
				},
				rules: {
					item_name: [{
						required: true,
						message: '请输入退还原因',
						trigger: ['blur', 'change']
					}],
					pay_type: [{
						required: true,
						message: '请选择退款方式',
						trigger: ['blur', 'change']
					}],
					remark: [{
						required: true,
						message: '请输入备注',
						trigger: ['blur', 'change']
					}],
					item_single_price: [{
							required: true,
							message: '请输入退款金额',
							trigger: ['blur', 'change']
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								console.log(value);
								console.log(this.data.expense_amount);
								if(parseFloat(value)>parseFloat(this.data.expense_amount)){
									return false;
								}else{
									return true;
								}
							},
							message: '退款金额不能大于待退款金额',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					]
				}
			}
		},
		onLoad(options) {
			this.data = JSON.parse(decodeURIComponent(options.data));
			this.form.item_single_price = this.data.expense_amount;
			this.host = this.$http.host;
		},
		mounted() {

		},
		methods: {
			confirm(e) {
				console.log(e[0]);
				this.pay_type = e[0].value;
				this.form.pay_type = e[0].label;
			},
			submit() {
				var that = this;
				var list = this.$refs.uUpload.lists;
				if(list.length==0){
					that.$refs.uToast.show({
						title: '请上传凭证',
						type: "error"
					});
					return;
				}
				var dir = '/static/img/license_front_img/';
				var form = JSON.parse(JSON.stringify(this.form));
				this.$refs.uForm.validate(valid => {
					if (valid) {
						cos.uploadFiles(list, dir, (data) => {
							console.log(data);
							var record_img = data.files.map(item => item.options.Key);
							form.pay_img = record_img.toString();
							form.pay_type = that.pay_type;
							form.order_id = that.data.orders_id;
							that.$http.post('/orders/back_amount', form, (res) => {
								if (res.data.success) {
									console.log(that.$refs.uToast);
									that.$refs.uToast.show({
										title: '退款成功',
										type: "success"
									});
									uni.$emit("getOrdersInfo", that.data);
									uni.navigateBack();
								} else {
									that.$refs.myModal.show('登录失败', res.data.result.message);
								}
							});
						});
					} else {
						console.log('验证失败');
					}
				});
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	}
</script>

<style>

</style>